import React from 'react';
import {
  Chart,
  Interval,
  Tooltip,
  Axis,
  Coordinate,
  Interaction,
  getTheme,
  Legend,
} from 'bizcharts';
import data from '../../../../public/data';
const HouseArea = () => {
  const cols = {
    percent: {
      formatter: (val) => {
        const vals = (val * 100).toFixed(0) + '%';
        return vals;
      },
    },
  };
  return (
    <>
      <Chart
        height={400}
        appendPadding={[10, 10, 10, 10]}
        data={data.houseAreaData}
        scale={cols}
        autoFit
      >
        <Coordinate type="theta" radius={0.75} />
        <Tooltip showTitle={false} />
        <Axis visible={false} />
        <Interval position="percent" adjust="stack" color="item" />
        <Legend
          name="item"
          visible={true}
          position="right"
          offsetX={-15}
          itemName={{ style: { fill: 'white' } }}
        />
        <Interaction type="element-single-selected" />
      </Chart>
      <p
        style={{
          fontSize: '16px',
          color: 'white',
          textIndent: '2em',
          marginTop: '20px',
          padding: '0 15px',
        }}
      >
        2021全年，昆明主城区及呈贡区住宅成交面积分布如上图所示。其中，{data.houseAreaData[0].item}
        住宅的成交面积占比最大，{data.houseAreaData[data.houseAreaData.length - 1].item}
        住宅的成交面积最少。
      </p>
    </>
  );
};
export default HouseArea;
